<template>
  <a-form
    :model="formState"
    name="basic"
    autocomplete="on"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
    ref="formRef"
    class="ant-advanced-search-form"
    :layout="defaultProps.layout"
    :label-col="{ span: defaultProps.labelCol }"
    :wrapper-col="{ span: defaultProps.wrapperCol }"
  >
    <a-row :gutter="defaultProps.gutter" style="width: 100%">
      <template v-for="(item, index) in defaultProps.formList" :key="index">
        <!-- 输入框 -->
        <a-col
          :span="defaultProps.num"
          v-if="item.type == 'input'"
          class="form-item"
        >
          <a-form-item
            :label="item.label"
            :name="item.name"
            :rules="item.rules"
            :extra="item.extra"
            :wrapperCol="item.itemProps.wrapperCol"
          >
            <a-input
              v-model:value="formState[item.name]"
              :placeholder="item.itemProps.placeholder"
            />
          </a-form-item>
        </a-col>
        <!-- 文本编辑 -->
        <a-col
          :span="defaultProps.num"
          v-if="item.type == 'editor'"
          class="form-item"
        >
          <a-form-item
            :label="item.label"
            :name="item.name"
            :rules="item.rules"
            style="width: 100% !important"
          >
            <Editor
              :content="formState[item.name]"
              :item="item"
              @getContent="getContent"
            ></Editor>
          </a-form-item>
        </a-col>
        <!-- 下拉框 -->
        <a-col
          :span="defaultProps.num"
          v-if="item.type == 'select'"
          class="form-item"
        >
          <a-form-item
            :label="item.label"
            :name="item.name"
            :rules="item.rules"
            :wrapperCol="item.itemProps.wrapperCol"
          >
            <a-select
              v-model:value="formState[item.name]"
              show-search
              :getPopupContainer="(triggerNode) => triggerNode.parentNode"
              :placeholder="
                item.itemProps.placeholder
                  ? item.itemProps.placeholder
                  : '请选择'
              "
              :allowClear="item.itemProps.allowClear"
              :mode="item.itemProps.mode"
              :autoClearSearchValue="item.itemProps.autoClearSearchValue"
              :maxTagCount="item.itemProps.maxTagCount"
              :filterOption="filterOption"
              :loading="item.itemProps.loading === true ? true : false"
            >
              <a-select-option
                v-for="(item1, index1) in item.itemProps.data"
                :value="item1.id"
                :label="item1.name"
                :key="index1"
                >{{ item1.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <!-- 数字输入框 -->
        <a-col
          :span="defaultProps.num"
          v-if="item.type == 'inputNumber'"
          class="form-item"
        >
          <a-form-item
            :label="item.label"
            :name="item.name"
            :rules="item.rules"
            :extra="item.extra"
          >
            <a-input-number
              style="width: 200px"
              v-model:value="formState[item.name]"
              :min="item.itemProps.min"
              :max="item.itemProps.max"
              :placeholder="item.itemProps.placeholder"
            />
          </a-form-item>
        </a-col>
        <!-- 单选 -->
        <a-col
          :span="defaultProps.num"
          v-if="item.type == 'radio'"
          class="form-item"
        >
          <a-form-item
            :label="item.label"
            :name="item.name"
            :rules="item.rules"
          >
            <a-radio-group v-model:value="formState[item.name]">
              <template v-if="item.itemProps.type != 2">
                <a-radio
                  v-for="(item1, index1) in item.itemProps.data"
                  :key="index1"
                  :value="item1.id"
                  :disabled="item1.disabled === true ? true : false"
                  >{{ item1.name }}
                </a-radio>
              </template>
              <!-- 按钮 -->
              <template v-if="item.itemProps.type == 2">
                <a-radio-button
                  v-for="(item1, index1) in item.itemProps.data"
                  :key="index1"
                  :value="item1.id"
                  :disabled="item1.disabled === true ? true : false"
                  >{{ item1.name }}
                </a-radio-button>
              </template>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <!-- 多选 -->
        <a-col
          :span="defaultProps.num"
          v-if="item.type == 'checkbox'"
          class="form-item"
        >
          <a-form-item
            :label="item.label"
            :name="item.name"
            :rules="item.rules"
          >
            <a-checkbox-group v-model:value="formState[item.name]">
              <a-checkbox
                v-for="(item1, index1) in item.itemProps.data"
                :key="index1"
                :value="item1.id"
                :disabled="item1.disabled === true ? true : false"
                >{{ item1.name }}
              </a-checkbox>
            </a-checkbox-group>
          </a-form-item>
        </a-col>
        <!-- switch开关 -->
        <a-col
          :span="defaultProps.num"
          v-if="item.type == 'switch'"
          class="form-item"
        >
          <a-form-item
            :label="item.label"
            :name="item.name"
            :rules="item.rules"
          >
            <a-switch
              v-model:checked="formState[item.name]"
              :checkedValue="item.itemProps.checkedValue"
              :unCheckedValue="item.itemProps.unCheckedValue"
              :checkedChildren="item.itemProps.checkedChildren"
              :unCheckedChildren="item.itemProps.unCheckedChildren"
              :disabled="item.itemProps.disabled === true ? true : false"
            />
          </a-form-item>
        </a-col>
        <!-- 树选择 -->
        <a-col
          :span="defaultProps.num"
          v-if="item.type == 'tree'"
          class="form-item"
        >
          <a-form-item
            :label="item.label"
            :name="item.name"
            :rules="item.rules"
          >
            <a-tree-select
              v-model:value="formState[item.name]"
              style="width: 100%"
              :tree-data="item.itemProps.data"
              :treeCheckable="item.itemProps.is_tree === true ? true : false"
              allow-clear
              :treeDefaultExpandAll="item.itemProps.is_expand_all"
              show-search
              :show-checked-strategy="
                item.itemProps.is_parent === true ? SHOW_PARENT : SHOW_ALL
              "
              placeholder="请选择"
              :multiple="item.itemProps.multiple === true ? true : false"
              treeNodeFilterProp="title"
              :maxTagCount="item.itemProps.maxTagCount"
            />
          </a-form-item>
        </a-col>
        <!-- 上传框 -->
        <a-col
          :span="defaultProps.num"
          v-if="item.type == 'img'"
          class="form-item"
        >
          <a-form-item
            :label="item.label"
            :name="item.name"
            :rules="item.rules"
          >
            <div v-if="formState[item.name]">
              <img :src="formState[item.name]" class="select_img" />
              <div>
                <a-space>
                  <a-button type="link" @click="selectImg(item)"
                    >重新选择</a-button
                  >
                  <a-button type="link" @click="delImg(item)">删除</a-button>
                </a-space>
              </div>
            </div>
            <div class="avatar-uploader" @click="selectImg(item)" v-else>
              <div>
                <plus-outlined></plus-outlined>
              </div>
              <div class="ant-upload-text">上传</div>
            </div>
          </a-form-item>
        </a-col>
        <!-- 新人引导图 -->
        <a-col
          :span="defaultProps.num"
          v-if="item.type == 'imgs'"
          class="form-item"
        >
          <a-form-item
            :label="item.label"
            :name="item.name"
            :rules="item.rules"
          >
            <a-form-item-rest>
              <app-upload
                :fileList="formState[item.name]"
                :min="item.itemProps.min"
                @upload-img="uploadImg"
              />
            </a-form-item-rest>
          </a-form-item>
        </a-col>
        <a-col
          :span="defaultProps.num"
          v-if="item.type == 'video'"
          class="form-item"
        >
          <a-form-item
            :label="item.label"
            :name="item.name"
            :rules="item.rules"
          >
            <div v-if="formState[item.name]">
              <video
                controls
                :src="formState[item.name]"
                width="104"
                height="104"
              ></video>
              <div>
                <a-space>
                  <a-button type="link" @click="selectImg(item)"
                    >重新选择</a-button
                  >
                  <a-button type="link" @click="delImg(item)">删除</a-button>
                </a-space>
              </div>
            </div>
            <div class="avatar-uploader" @click="selectImg(item)" v-else>
              <div>
                <plus-outlined></plus-outlined>
              </div>
              <div class="ant-upload-text">上传</div>
            </div>
          </a-form-item>
        </a-col>
        <!-- 时间 -->
        <a-col
          :span="defaultProps.num"
          v-if="item.type == 'date'"
          class="form-item"
        >
          <a-form-item
            :label="item.label"
            :name="item.name"
            :rules="item.rules"
          >
            <a-date-picker
              v-model:value="formState[item.name]"
              :picker="item.itemProps.picker"
              :showTime="item.itemProps.showTime === true ? true : false"
              :format="item.itemProps.format"
            />
          </a-form-item>
        </a-col>
        <!-- 时间区间 -->
        <a-col :span="5" v-if="item.type == 'dateRanger'" class="form-item">
          <a-form-item
            :label="item.label"
            :name="item.name"
            :rules="item.rules"
            style="width: 100%"
          >
            <a-range-picker
              v-model:value="formState[item.name]"
              :showTime="item.itemProps.showTime === true ? true : false"
              :format="item.itemProps.format"
            />
          </a-form-item>
        </a-col>
        <!-- 城市筛选框 -->
        <a-col
          :span="defaultProps.num"
          v-if="item.type == 'city'"
          class="form-item"
        >
          <a-form-item
            :label="item.label"
            :name="item.name"
            :rules="item.rules"
          >
            <a-cascader
              v-model:value="formState[item.name]"
              :options="options"
              placeholder="请选择"
              :changeOnSelect="
                item.itemProps.changeOnSelect === true ? true : false
              "
              :multiple="item.itemProps.multiple === true ? true : false"
              :show-search="{ filter }"
            />
          </a-form-item>
        </a-col>
        <!-- 文本框 -->
        <a-col
          :span="defaultProps.num"
          v-if="item.type == 'textarea'"
          class="form-item"
        >
          <a-form-item
            :label="item.label"
            :name="item.name"
            :rules="item.rules"
          >
            <a-textarea
              v-model:value="formState[item.name]"
              :rows="item.itemProps.rows"
              :placeholder="item.itemProps.placeholder"
              :maxlength="item.itemProps.maxlength"
              :showCount="item.itemProps.showCount === true ? true : false"
              :autoSize="item.itemProps.autoSize === true ? true : false"
            />
          </a-form-item>
        </a-col>
        <!-- 时间段选择 -->
        <a-col
          :span="defaultProps.num"
          v-if="item.type == 'picker'"
          class="form-item"
        >
          <a-form-item
            :label="item.label"
            :name="item.name"
            :rules="item.rules"
          >
            <a-time-range-picker
              v-model:value="formState[item.name]"
              :picker="item.itemProps.picker"
              :showTime="item.itemProps.showTime === true ? true : false"
              :format="item.itemProps.format"
            />
          </a-form-item>
        </a-col>

        <!-- 时间选择框 -->
        <a-col
          :span="defaultProps.num"
          v-if="item.type == 'timePicker'"
          class="form-item"
        >
          <a-form-item
            :label="item.label"
            :name="item.name"
            :rules="item.rules"
          >
            <a-time-picker
              v-model:value="formState[item.name]"
              :valueFormat="item.itemProps.valueFormat"
              :format="item.itemProps.format"
            />
          </a-form-item>
        </a-col>
      </template>
      <!-- 筛选和清空 -->
      <a-col :span="defaultProps.btnSpan" class="form-item">
        <a-form-item
          :wrapper-col="{
            span: defaultProps.btnWarpSpan,
            offset: defaultProps.btnWarpOffset,
          }"
        >
          <a-button type="primary" html-type="submit">{{
            defaultProps.btnTitle
          }}</a-button>
          <a-button
            style="margin: 0 8px"
            v-if="defaultProps.showResetBtn === true"
            @click="onClearForm"
            >{{ defaultProps.resetBtnTitle }}
          </a-button>
        </a-form-item>
      </a-col>
    </a-row>
    <!-- 结束 -->
  </a-form>
  <!--选择图片-->
  <a-drawer
    v-model:visible="state.visible"
    title="选择图片"
    width="1200"
    :closable="false"
    :footer-style="{ textAlign: 'right' }"
    @close="onImgClose"
  >
    <oss-page
      is_select
      :is_more="false"
      @GetSelectImg="GetSelectImg"
    ></oss-page>
    <template #footer>
      <a-button style="margin-right: 8px" @click="onImgClose">取消</a-button>
      <a-button type="primary" @click="onImgConfirm">确定</a-button>
    </template>
  </a-drawer>
</template>
<script setup>
import { reactive, ref } from "vue";

import OssPage from "@/views/System/oss/index.vue";

import dayjs from "dayjs";
import Editor from "@/components/editor/index.vue";
import { TreeSelect } from "ant-design-vue";

import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";

const SHOW_ALL = TreeSelect.SHOW_ALL;
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

const formRef = ref(); //清空使用

const formState = reactive({}); //表单的值

const state = reactive({
  visible: false,
  img: "",
  name: "", //名称
});
console.log('formState------',formState)
//城市数据
const options = [];
//获取父级的传值
const defaultProps = defineProps({
  formList: Array,
  num: {
    type: Number,
    default: 4,
  },
  gutter: {
    type: Number,
    default: 24,
  },
  layout: {
    type: String,
    default: "inline", //vertical inline horizontal
  },
  labelCol: {
    type: Number,
    default: 0,
  },
  wrapperCol: {
    type: Number,
    default: 18,
  },
  btnTitle: {
    type: String,
    default: "查询",
  },
  btnSpan: {
    type: Number,
    default: 6,
  },
  resetBtnTitle: {
    type: String,
    default: "刷新",
  },
  showResetBtn: {
    type: Boolean,
    default: true,
  }, //是否展示清空按钮
  btnWarpSpan: {
    type: Number,
    default: 0,
  },
  btnWarpOffset: {
    type: Number,
    default: 0,
  },
});
//为了传值给父级
const emit = defineEmits(["Search"]);
//搜索参数
const onFinish = (values) => {
  //处理时间格式
  defaultProps.formList.map(function (item, index) {
    //时间格式
    if (item.type == "date" || item.type == "dateRanger") {
      if (item.type == "date") {
        values[item.name] = dayjs(values[item.name]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      } else {
        var date_time = values[item.name];
        values[item.name] = [
          dayjs(date_time[0]).format("YYYY-MM-DD HH:mm:ss"),
          dayjs(date_time[1]).format("YYYY-MM-DD HH:mm:ss"),
        ];
      }
    } else if (item.type == "switch") {
      //处理切换框
      values[item.name] = values[item.name];
    }
  });
  //传递给父级
  emit("Search", values);
};

//清空表单
const onClearForm = function () {
  formRef.value.resetFields();
  var values = formRef.value.getFieldsValue();
  emit("Search", values);
};
//设置表单的值
const resetForm = function (values) {

  formRef.value.resetFields(values);
  for (var i in values) {
    formState[i] = values[i];
  }
};

// **重点！！这里需要使用defineExpose暴露出去**
defineExpose({
  resetForm,
});

const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};

//城市搜索
const filter = (inputValue, path) => {
  return path.some(
    (option) =>
      option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
  );
};


const getContent = (val, item) => {
  formState[item.name] = val;


};
//下拉框搜索
const filterOption = (input, option) => {
  //select有label这个字段
  return option.label?.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

//选择图片
function selectImg(item) {
  state.visible = true;
  state.name = item.name;
}

//删除图片
function delImg(item) {
  state.name = "";
  formState[item.name] = "";
}

//关闭选择图片
function onImgClose() {
  state.visible = false;
  state.name = "";
}
//确认选择图片
function onImgConfirm() {
  state.visible = false;
  formState[state.name] = state.img;
  state.name = "";
}
//获取选择的图片
function GetSelectImg(item) {
  state.img = item[0];
}
const uploadImg = (val) => {
  formState["newer_img"] = formState["newer_img"].concat(val);
};
</script>

<style scoped>
.ant-advanced-search-form {
  /*padding: 20px;*/
  width: 100%;
}

.form-item {
  /* margin-top: 15px; */
}

.avatar-uploader {
  width: 128px;
  height: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed #999;
  cursor: default;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.select_img {
  width: 128px;
  height: 128px;
}
</style>
